<template>
  <a-modal
    :open="visible"
    title="删除音色"
    :confirm-loading="loading"
    @ok="handleConfirm"
    @cancel="handleCancel"
    ok-text="确认删除"
    cancel-text="取消"
    ok-type="danger"
  >
    <div class="delete-content">
      <div class="warning-icon">
        <ExclamationCircleOutlined style="color: #ff4d4f; font-size: 24px;" />
      </div>
      <div class="delete-message">
        <p class="main-message">确定要删除音色 "{{ voiceData?.voiceName }}" 吗？</p>
        <p class="sub-message">此操作不可撤销，删除后将无法恢复。</p>
        <div v-if="voiceData?.status === 1" class="status-warning">
          <a-alert
            message="注意：该音色当前为启用状态，删除前需要先禁用"
            type="warning"
            show-icon
            style="margin-top: 12px;"
          />
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import type { VoiceDetailVo } from '@/api/generated/data-contracts'
import { Codewin } from '@/api/generated/Codewin'
import { useAuthStore } from '@/stores'

interface Props {
  visible: boolean
  voiceData?: VoiceDetailVo | null
}

interface Emits {
  (e: 'update:visible', value: boolean): void
  (e: 'success'): void
}

const props = withDefaults(defineProps<Props>(), {
  voiceData: null
})

const emit = defineEmits<Emits>()

const loading = ref(false)

// API实例
const authStore = useAuthStore()
const api = new Codewin({
  baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
  securityWorker: () => ({
    headers: authStore.token ? { Authorization: `Bearer ${authStore.token}` } : {}
  })
})

// 确认删除
const handleConfirm = async () => {
  if (!props.voiceData?.id) {
    message.error('音色信息不完整')
    return
  }

  // 检查音色状态，只能删除已禁用的音色
  if (props.voiceData.status === 1) {
    message.error('只能删除已禁用的音色，请先禁用该音色')
    return
  }

  try {
    loading.value = true
    const response = await api.deleteVoice(props.voiceData.id.toString())
    
    if (response.data?.code === 0) {
      message.success('音色删除成功')
      emit('success')
      handleCancel()
    } else {
      message.error(response.data?.message || '音色删除失败')
    }
  } catch (error) {
    console.error('删除音色失败:', error)
    message.error('删除音色失败，请重试')
  } finally {
    loading.value = false
  }
}

// 取消操作
const handleCancel = () => {
  emit('update:visible', false)
}
</script>

<style scoped>
.delete-content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 8px 0;
}

.warning-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.delete-message {
  flex: 1;
}

.main-message {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 500;
  color: #262626;
}

.sub-message {
  margin: 0;
  color: #8c8c8c;
  font-size: 14px;
}

.status-warning {
  margin-top: 12px;
}
</style>